<template>
    <div>
        <!-- 头部导航 -->
        <div class="header">
            <van-nav-bar title="商品评价" right-text="保存" left-arrow @click-left="toBack" @click-right="toSubmit" />
        </div>


        <div class="mainContent">
            <!-- 评星 -->
            <div class="product-box">
                <img :src="imgPath" class="product-img">
                <div class="title">描述相符</div>
                <div>
                    <van-rate v-model="value" :size="20" color="#ee0a24" void-icon="star" void-color="#cecece" />
                </div>
            </div>

            <!-- 评价内容 -->
            <van-cell-group>
                <van-field v-model="message" rows="6" autosize type="textarea" maxlength="100" placeholder="请输入评价内容"
                    show-word-limit />
            </van-cell-group>

            <!-- 评价图片 -->
            <div class="image-box">
                <div class="img-tip">*上传图片大小不超过2M</div>
                <van-uploader v-model="fileList" :max-count="3" upload-text="添加图片" accept="image/*"
                    :before-read="beforeRead" />
            </div>
        </div>


    </div>

</template>

<script>

import { addComm } from '../../network/product'

export default {
    name: 'HomeR',
    data() {
        return {
            value: 0,
            fileList: [],
            message: '',
            product: '', //商品信息
            path: 'https://zbz-imgs.oss-cn-beijing.aliyuncs.com/',
        }
    },
    mounted() {

    },
    methods: {

        toBack() {
            this.$router.go(-1)
        },
        toSubmit: function () {
            if (this.value != 0) {

                // 表单
                var params = new FormData();
                params.append('orderNum', this.product.order_num)
                params.append('productId', this.product.product_id)
                params.append('orderId', this.product.order_id)
                params.append('userId', localStorage.userId)
                params.append('satisfaction', this.value)
                params.append('context', this.message)

                //图片
                for (var i = 0; i < this.fileList.length; i++) {
                    params.append('forum_img', this.fileList[i].file)
                }

                addComm(params).then(res => {
                    if (res.flag) {
                        this.$toast('评价成功')
                        this.toBack()
                    } else {
                        this.$toast('评价失败')
                    }
                })
            } else {
                this.$toast('请对该商品进行评星')
            }
        },


        beforeRead: function (file) {
            // 此时可以自行将文件上传至服务器
            console.log(file)
            var size = (file.size * 1) / 1024 / 1024;
            if (size > 2) {
                this.$toast('请上传小于2M的图片')
                return false
            } else {
                return true
            }
        }

    },
    computed: {
        imgPath: function () {
            if (this.product.order_flag == 12 || this.product.order_flag == 13) {
                return this.path + 'vitality/product/' + this.product.product_pic
            } else {
                return this.path + "product/product_" + this.product.product_id + "/" + this.product
                    .product_pic
            }
        }
    },
    created: function () {
        this.product = JSON.parse(localStorage.goods);
    },
    filters: {

    }

}

</script>

<style lang='less' scoped>
.header .van-icon {
    color: #333;
    font-size: 40px;
    font-weight: bold;
}

.header .van-nav-bar__text {
    color: #333;
}

.header {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 88px;
    background-color: #fff;
    padding-top: 60px;
}

/deep/.van-nav-bar__text,
/deep/.van-nav-bar__left,
/deep/.van-nav-bar .van-icon {
    color: #333;
}


.mainContent {
    position: relative;
    top: 148px;
}


.product-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 152px;
    background: #FFF;
    padding: 16px 24px 16px 160px;
}

.product-img {
    position: absolute;
    top: 16px;
    left: 24px;
    display: block;
    width: 120px;
    height: 120px;
    border-radius: 16px;
}

.title {
    font-size: 28px;
    color: #333;
}

.send-btn {
    position: absolute;
    top: 40px;
    right: 0;
    height: 88px;
    width: 88px;
    font-size: 28px;
    color: #666;
    text-align: center;
    line-height: 88px;
}

.image-box {
    width: 100%;
    padding: 16px 24px;
}

.img-tip {
    width: 100%;
    font-size: 24px;
    color: #999;
    padding-bottom: 16px;
}
</style>